<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Document</title>
</head>
<body>
<div id="app">
  <h2>{{ msg }}</h2>
  <br>

  <cpn></cpn>

  <cpn>
    <span>javaScript</span> --
    <span>scala</span>
  </cpn>

  <cpn>
    <template slot-scope="slot">
<!--      <span v-for="item in slot.data">{{item)}}-</span>-->
      <span>{{slot.data.join("-")}}</span>
    </template>
  </cpn>
</div>
<!--作用于插槽： 父组件替换插槽的标签，但是内容却是由子组件来提供-->
<template id="cpn">
  <div>
   <slot :data="languages">
     <ul>
       <li v-for="item in languages">{{item}}</li>
     </ul>
   </slot>
  </div>
</template>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  const cpn ={
    template:"#cpn",
    data(){
      return{
        languages:['java','c','c++','python','go','swift']
      }
    }
  }
  new Vue({
    el: "#app",
    data: {
      msg: "hello,world",
    },
    components:{
      cpn
    }
  });
</script>
</body>
</html>
